/*
 * @Description:
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2023-10-19 15:12:56
 * @LastEditors: Seven
 * @LastEditTime: 2023-10-24 16:33:33
 */
import React, { memo, useRef } from "react";
import { Form, Row, Col, Input, Button, Select } from "antd";
import { loacalCache } from "@/ultils/func";

import { TopBannerWrapper } from "./style";
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};
const { Option } = Select;
const TopBanners = memo(({ search }) => {
  const [form] = Form.useForm();
  const formRef = useRef();
  function onFinish() {
    let value = formRef.current.getFieldsValue();
    console.log(value, "value🚀🚀🚀");
    search(value);
  }
  return (
    <TopBannerWrapper>
      <div className="topMargin">
        <Form
          ref={formRef}
          form={form}
          name="queryModel"
          className="search-form"
          layout="horizontal"
          size="middle"
          {...formItemLayout}
        >
          <Row gutter={32}>
            <Col span={6}>
              <Form.Item label="登记编码" name="registrationId">
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="登记描述" name="registrationDesc">
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="申请部门" name="applicationDept">
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Button
                type="primary"
                onClick={() => {
                  onFinish();
                }}
              >
                查询
              </Button>
              <Button
                style={{ marginLeft: "10px" }}
                onClick={() => {
                  form.resetFields();
                }}
              >
                清除
              </Button>
            </Col>
          </Row>
          <Row gutter={32}>
            <Col span={6}>
              <Form.Item label="专业" name="speciality">
                <Select>
                  {loacalCache.getCache("DicDataList")?.["falut_speciality"] &&
                    loacalCache
                      .getCache("DicDataList")
                      ?.["falut_speciality"].map((item) => {
                        return (
                          <Option value={item.value} key={item.id}>
                            {item.label}
                          </Option>
                        );
                      })}
                </Select>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="线路" name="line">
                <Select>
                  {loacalCache.getCache("DicDataList")?.["line"] &&
                    loacalCache
                      .getCache("DicDataList")
                      ?.["line"].map((item) => {
                        return (
                          <Option value={item.value} key={item.id}>
                            {item.label}
                          </Option>
                        );
                      })}
                </Select>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>
    </TopBannerWrapper>
  );
});

export default TopBanners;
